<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" href="../css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.background {
    border-style: none;
    width: 50px;
    height: 58px;
}
.numbers {
    border-style: none;
    background-color: #292929;
    padding: 0px;
    margin: 0px;
    width: 50px;
    height: 42px;
    text-align: center; 
    font-family: Arial; 
    font-size: 36px;
    font-weight: normal;    /* options are normal, bold, bolder, lighter */
    color: #FFFFFF;     /* change color using the hexadecimal color codes for HTML */
}
.title {    /* the styles below will affect the title under the numbers, i.e., “Days”, “Hours”, etc. */
    border: none;    
    padding: 0px;
    margin: 0px 2px;
    width: 50px;
    text-align: center; 
    font-family: Arial; 
    font-size: 10px; 
    font-weight: normal;    /* options are normal, bold, bolder, lighter */
    color: #999999;    /* change color using the hexadecimal color codes for HTML */
    background-color: #000000;  
}
#form {    /* the styles below will affect the outer border of the countdown timer */
	width: 280px;
	height: 90px;
	border-style: ridge;    /* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */
	border-width: 3px;
	border-color: #666666;  /* change color using the hexadecimal color codes for HTML */
	background-color: #000000;
	padding: 2px;
	margin: 0px;
	position: absolute;   /* leave as "relative" to keep timer centered on your page, or change to "absolute" then change the values of the "top" and "left" properties to position the timer */
	top: 38px;            /* change to position the timer */
	left: 1px;            /* change to position the timer; delete this property and it's value to keep timer centered on page */
}
.line {
	border-style: none;
	width: 50px;
	height: 4px;
	z-index: 15;
}
</style>

<script type="text/javascript">

/*
Count down until any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
Modified by Robert M. Kuhnhenn, D.O. 
on 5/30/2006 to count down to a specific date AND time,
and on 1/10/2010 to include time zone offset.
*/

/*  Change the items below to create your countdown target date and announcement once the target date and time are reached.  */
var current="Deadline Over!";        //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters
var year=2012;        //—>Enter the count down target date YEAR
var month=8;          //—>Enter the count down target date MONTH
var day=14;           //—>Enter the count down target date DAY
var hour=00;          //—>Enter the count down target date HOUR (24 hour clock)
var minute=00;        //—>Enter the count down target date MINUTE
var tz=-5;            //—>Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

//—>    DO NOT CHANGE THE CODE BELOW!    <—
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

function countdown(yr,m,d,hr,min){
    theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
    var today=new Date();
    var todayy=today.getYear();
    if (todayy < 1000) {
    todayy+=1900; }
    var todaym=today.getMonth();
    var todayd=today.getDate();
    var todayh=today.getHours();
    var todaymin=today.getMinutes();
    var todaysec=today.getSeconds();
    var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
    var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
    var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
    var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
    var dd=futurestring-todaystring;
    var dday=Math.floor(dd/(60*60*1000*24)*1);
    var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
        document.getElementById('count2').innerHTML=current;
        document.getElementById('count2').style.display="inline";
        document.getElementById('count2').style.width="390px";
        document.getElementById('dday').style.display="none";
        document.getElementById('dhour').style.display="none";
        document.getElementById('dmin').style.display="none";
        document.getElementById('dsec').style.display="none";
        document.getElementById('days').style.display="none";
        document.getElementById('hours').style.display="none";
        document.getElementById('minutes').style.display="none";
        document.getElementById('seconds').style.display="none";
        return;
    }
    else {
        document.getElementById('count2').style.display="none";
        document.getElementById('dday').innerHTML=dday;
        document.getElementById('dhour').innerHTML=dhour;
        document.getElementById('dmin').innerHTML=dmin;
        document.getElementById('dsec').innerHTML=dsec;
        setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
    }
}
</script>


</head>

<body onload="countdown(year,month,day,hour,minute)">
<div>
<h3 align = "center"> Time Remaining </h3>
</div>

<div id="form" style="position:absolute">
    <div class="numbers" id="count2" style="position: absolute; top: 12px; height: 57px; padding: 2px 0 0 2px; z-index: 20; left: 20px;"></div>
    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 20px; top: 12px;"/>
    <img src="images/line.jpg" class="line" style="position: absolute; left: 22px; top: 40px;"/> 
  <div class="numbers" id="dday" style="position: absolute; left: 20px; top: 32px;" ></div>
	
    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 84px; top: 12px;"/>
    <img src="images/line.jpg" class="line" style="position: absolute; left: 84px; top: 40px;"/>
  <div class="numbers" id="dhour" style="position: absolute; left: 84px; top: 32px;" ></div>
	
    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 146px; top: 12px;"/>
    <img src="images/line.jpg" class="line" style="position: absolute; left: 146px; top: 40px;"/>
  <div class="numbers" id="dmin" style="position: absolute; left: 146px; top: 32px;" ></div>
	
    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 212px; top: 12px;"/>
    <img src="images/line.jpg" class="line" style="position: absolute; left: 212px; top: 40px;"/>
  <div class="numbers" id="dsec" style="position: absolute; left: 212px; top: 32px;" ></div>
	
    <div class="title" id="days" style="position: absolute; left: 20px; top: 72px;" >Days</div>
    <div class="title" id="hours" style="position: absolute; left: 78px; top: 74px;" >Hours</div>
    <div class="title" id="minutes" style="position: absolute; left: 138px; top: 72px;" >Minutes</div>
    <div class="title" id="seconds" style="position: absolute; left: 207px; top: 72px;" >Seconds</div>
</div>

<br/><br/><br/><br/><br/><br/>
    <div>
    <table width="53%" id="table1" class="table table-striped">
<tr>
<td colspan="2">
<h2><strong><center>Statistics</center></strong></h2>
</td>
</tr>
<tr>
<td width="431">
Total Students:
</td>
<td width="40">
&nbsp;&nbsp;90
</td>
</tr>
<tr>
<td>
Students currently in some group:
</td>
<td>
&nbsp;&nbsp;31
</td>

</tr>
<tr>
<td>
Students currently not in any group:
</td>
<td>
&nbsp;&nbsp;59
</td>

</tr>
<tr>
<td>
No of current groups:
</td>
<td>
&nbsp;&nbsp;4
</td>
</tr>

<tr>
<td>
Expected Group Size:
</td>
<td>
&nbsp;&nbsp;8
</td>
</tr>

<tr>
<td>
No of students who never participated:
</td>
<td>
&nbsp;&nbsp;25
</td>
</tr>

<tr>
<td>
No of participants not yet in any group:
</td>
<td>
&nbsp;&nbsp;34
</td>
</tr>
</table>
</div>
<div align="center">
<TABLE>
<tr>
<td>
<input name="Button" type="button" id="ButtonExport" onclick= "#" value="Export Final List" align="center" href=""/>
</td>
<form action="../Faculty/GroupSelectionPage1.html" target="_top">
<td>
<input name="Button" type="submit" id="ButtonExport"  value="Edit Deadline"  align="center"/>

</td>
</form>
</tr>

</TABLE>
</div>
</body>
</html>
